웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
프론트 프레임워크 Next.js를 사용하는 웹 프로젝트에서 내부 및 외부의 스크립트 파일을 추가하는 방법에 대하여 알아봅니다.
# next.js에서 script 파일 추가하기
nextjs는 서버 사이드 렌더링을 위한 목적으로 많이 사용됩니다. next.js에서는 <script> 파일을 불러오고 싶을때 어떻게 사용할 수 있을까요? 크게 두 가지 방법으로 가능합니다.
하나. 페이지가 열릴 때 함수를 사용하여 추가하는 방법
둘. /page/ 라우팅 페이지에 추가하여 사용하기
여기서는 두 번째 방법을 알아봅니다. 왜냐하면 가장 빠르고 쉬운 방법이기 때문입니다.
! /page/ 라우팅 페이지에 추가하여 사용하기
이 방법은 원하는 웹페이지만 쉽게 스크립트 파일을 추가할 수 있습니다. 서버 사이드 렌더링(SSR) 방식이므로 해당 페이지에서만 해당 스크립트를 로드하죠~ 그럼 아래에서 자세히 알아봅니다.
만약 /about/페이지에 /scripts/about.js 파일을 불러오려면 아래처럼 할 수 있습니다.
@ about.js
import Head from 'next/head';
export default () => (
<div>
<Head>
<script type="text/javascript" src="/scripts/about.js"></script>
</Head>
<MyComponent />
</div>
)
export default () => (
<div>
<Head>
<script type="text/javascript" src="/scripts/about.js"></script>
</Head>
<MyComponent />
</div>
)
이제 /scripts/에 위치한 about.js 파일이 페이지가 열리면서 로딩되게 됩니다. 이때 해당 스크립트는 <head> 태그안에 위치할 수 있도록 Head 컴포넌트를 사용하였습니다. Head 컴포넌트는 next.js에서 제공하는 내장 컴포넌트로 head 태그 내부에 메타 및 스크립트, 스타일 등을 불러와 사용할 때 매우 편하게 선언할 수 있죠.
여기까지 스크립트를 로딩하는 방법에 대하여 간단하게 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
